// src/assets/scss/_variables.scss

// -----------------------------------------------------------------------------
// #FONT FAMILIES
// -----------------------------------------------------------------------------
$font-family-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
$font-family-chinese: '思源黑体', 'Source Han Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
$font-family-base: $font-family-sans-serif, $font-family-chinese;
$font-family-icons: 'Segoe MDL2 Assets'; // 保持现有图标字体，或考虑SVG

// -----------------------------------------------------------------------------
// #COLORS - Dark Theme Focus
// -----------------------------------------------------------------------------

// Base Palette
$color-black: #000000;
$color-white: #FFFFFF;

$color-gray-50: #F9FAFB;
$color-gray-100: #F3F4F6;
$color-gray-200: #E5E7EB;
$color-gray-300: #D1D5DB;
$color-gray-400: #9CA3AF;
$color-gray-500: #6B7280;
$color-gray-600: #4B5563;
$color-gray-700: #374151;
$color-gray-800: #1F2937;
$color-gray-900: #111827;

// Primary / Accent Color (例: Tailwind Blue 600)
$primary-50: #EFF6FF;
$primary-100: #DBEAFE;
$primary-200: #BFDBFE;
$primary-300: #93C5FD;
$primary-400: #60A5FA;
$primary-500: #3B82F6; // 主色
$primary-600: #2563EB;
$primary-700: #1D4ED8;
$primary-800: #1E40AF;
$primary-900: #1E3A8A;

// New Teal Accent Palette (for a "cooler" look)
$teal-50: #F0FDFA;
$teal-100: #CCFBF1;
$teal-200: #99F6E4;
$teal-300: #5EEAD4;
$teal-400: #2DD4BF;
$teal-500: #14B8A6; // Main accent
$teal-600: #0D9488; // Darker for hover
$teal-700: #0F766E; // Even darker for active
$teal-800: #115E59;
$teal-900: #134E4A;

// Semantic Colors (NEW Light Theme)
$bg-color: $color-gray-50; 
$surface-color: $color-white; 
$surface-color-hover: $color-gray-100; 
$surface-color-active: $color-gray-200; 

$text-color-primary: $color-gray-800;     
$text-color-secondary: $color-gray-600;   
$text-color-disabled: $color-gray-400;    

$border-color: $color-gray-200;           
$border-color-strong: $color-gray-300;    

$accent-color: $teal-500;                   // New Teal Accent
$accent-color-hover: $teal-600;             // New Teal Hover
$accent-color-active: $teal-700;            // New Teal Active
$accent-text-color: $color-white;         // Remains white, good on Teal

// Feedback Colors
$color-success: #10B981; 
$color-warning: #F59E0B; // Amber 500
$color-error:   #EF4444; // Red 500
$color-info:    $teal-500; // New: Info color matches new Teal accent

// -----------------------------------------------------------------------------
// #TYPOGRAPHY
// -----------------------------------------------------------------------------
$font-size-base: 14px;
$font-size-sm: 12px;
$font-size-lg: 16px;
$font-size-xl: 18px;
$font-size-display: 24px;

$line-height-base: 1.6;
$line-height-sm: 1.4;
$line-height-lg: 1.8;

$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-medium: 500; // 用于强调或标题
$font-weight-semibold: 600; // 更强的强调
$font-weight-bold: 700;

$letter-spacing-base: normal; // 或者 0.01em

// -----------------------------------------------------------------------------
// #SPACING & SIZING
// -----------------------------------------------------------------------------
$spacing-unit: 4px;
$spacing-xs: $spacing-unit * 1;  // 4px
$spacing-sm: $spacing-unit * 2;  // 8px
$spacing-md: $spacing-unit * 3;  // 12px
$spacing-base: $spacing-unit * 4; // 16px (常用基础间距)
$spacing-lg: $spacing-unit * 6;  // 24px
$spacing-xl: $spacing-unit * 8;  // 32px
$spacing-xxl: $spacing-unit * 12; // 48px

// -----------------------------------------------------------------------------
// #BORDERS & RADIUS
// -----------------------------------------------------------------------------
$border-width: 1px;
$border-style: solid;

$border-radius-sm: 3px;
$border-radius-base: 6px;
$border-radius-lg: 8px;
$border-radius-xl: 12px;
$border-radius-pill: 9999px; // 用于药丸形状按钮等
$border-radius-circle: 50%;

// -----------------------------------------------------------------------------
// #SHADOWS (Subtle and modern)
// -----------------------------------------------------------------------------
// Based on Tailwind CSS shadows, good for dark themes
$shadow-sm: 0 1px 2px 0 rgba($color-black, 0.15);
$shadow-base: 0 1px 3px 0 rgba($color-black, 0.2), 0 1px 2px 0 rgba($color-black, 0.16);
$shadow-md: 0 4px 6px -1px rgba($color-black, 0.2), 0 2px 4px -1px rgba($color-black, 0.16);
$shadow-lg: 0 10px 15px -3px rgba($color-black, 0.25), 0 4px 6px -2px rgba($color-black, 0.15);
$shadow-xl: 0 20px 25px -5px rgba($color-black, 0.25), 0 10px 10px -5px rgba($color-black, 0.14);
$shadow-2xl: 0 25px 50px -12px rgba($color-black, 0.35);
$shadow-inner: inset 0 2px 4px 0 rgba($color-black, 0.15);

// -----------------------------------------------------------------------------
// #TRANSITIONS
// -----------------------------------------------------------------------------
$transition-duration-short: 0.15s;
$transition-duration-base: 0.2s;
$transition-duration-long: 0.3s;
$transition-timing-function: ease-in-out;

// -----------------------------------------------------------------------------
// #Z-INDEX
// -----------------------------------------------------------------------------
$z-index-dropdown: 1000;
$z-index-sticky: 1020;
$z-index-fixed: 1030;
$z-index-modal-backdrop: 1040;
$z-index-modal: 1050;
$z-index-popover: 1060;
$z-index-tooltip: 1070;
$z-index-toast: 1080;

// -----------------------------------------------------------------------------
// #BREAKPOINTS (Optional, if responsive design needed within Electron views)
// -----------------------------------------------------------------------------
// $breakpoint-sm: 576px;
// $breakpoint-md: 768px;
// $breakpoint-lg: 992px;
// $breakpoint-xl: 1200px; 